<template>
  <div class="form-container">
    <el-form ref="form" :model="form" :rules="formRules" label-width="120px">
      <el-form-item label="预定日期">
        <el-date-picker
            v-model="rentalDateRange"
            type="daterange"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="入住日期"
            end-placeholder="退房日期"
            :picker-options="datePickerOptions"
            @change="calculateDays"
        ></el-date-picker>
        <span v-if="rentalDateRange && rentalDateRange[0]">
    共{{ rentalDays }}天
    </span>
      </el-form-item>
      <el-form-item label="Name">
        <el-input v-model="form.guestName" placeholder="您的姓名"></el-input>
      </el-form-item>
      <el-form-item label="Name">
        <el-input v-model="form.idNumber" placeholder="您的身份证"></el-input>
      </el-form-item>
      <el-form-item label="Phone Number">
        <el-input v-model="form.phonenumber" placeholder="您的手机号"></el-input>
      </el-form-item>
      <el-form-item label="Email">
        <el-input v-model="form.email" placeholder="您的email"></el-input>
      </el-form-item>
      <el-form-item label="Arrival Time">
        <el-date-picker
            v-model="form.expectTime"
            type="datetime"
            placeholder="到店时间"
            value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="Special request">
        <el-input v-model="form.specialRequirement" placeholder="特别要求"></el-input>
      </el-form-item>
      总价格为： {{totalPrice}}
      <el-form-item>
        <el-button type="primary" @click="submitForm">去支付</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>

import axios from "axios";
export default {
  name: "HotelCreateOrder",
  data() {
    return {
      // 表单校验
      formRules: {
        guestName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        phonenumber: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1\d{10}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ],
        idNumber: [
          { required: true, message: '请输入身份证', trigger: 'blur' },
          // 自定义的身份证校验规则
          {
            validator: (rule, value, callback) => {
              if (!value || /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/.test(value)) {
                callback();
              } else {
                callback(new Error('身份证格式不正确'));
              }
            },
            trigger: 'blur'
          }
        ],
        expectTime: [
          { required: true, message: '请选择到店时间', trigger: 'change' }
        ]
      },

      roomName : '',
      totalPrice : 0,
      gateway: 'http://localhost:8093/hotel/hotel',
      rentalDateRange : [], // 时间
      rentalDays : 0, // 订房天数
      datePickerOptions: {
        disabledDate: time => {
          const currentDate = new Date();
          currentDate.setHours(0, 0, 0, 0);
          return time.getTime() < currentDate.getTime();
        },
      },

      form: {
        orderId : '', // 订单 id
        cityId : -1, // 地区id
        hotelName : '', // 酒店名称
        hotelAddress : '', // 酒店详细位置
        count : -1, // 订房数量
        hotelRoomType : -1, // 订房id
        idNumber: '', // 身份证
        checkInTime: null,  // 入住时间
        checkOutTime: null,  // 退房时间
        guestName: '',  // 姓名
        phonenumber: '',  // 手机号
        email: '',  // 邮箱
        expectTime: '', // 预计到店时间
        specialRequirement : '' // 特别要求
      }
    };
  },
  methods: {
    calculateDays() {
      const range = this.rentalDateRange;
      if (range && range[0] && range[1]) {
        const startDate = new Date(range[0]);
        const endDate = new Date(range[1]);
        const days = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24));
        this.rentalDays = days;
        this.totalPrice = days * this.price;
      } else {
        this.rentalDays = 0;
      }
      this.form.checkInTime = range[0];
      this.form.checkOutTime = range[1];
    },

    getOrderId(){
      axios({
        url: this.gateway + '/hotel/getOrderId',
        method : 'get'
      }).then(res => {
        console.log(res)
        this.orderId = res.data;
      })
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
          if (!valid) {
            return
          }
      if(this.form.expectTime == null){
        this.$message.error("请选择到店时间")
        return
      }
      console.log(this.form)
      axios({
        url : this.gateway + '/hotel/createHotelOrder',
        method : 'post',
        data: this.form,
      }).then(res => {
        console.log(res)
        if(res.data.code !== 200){
          this.$message.error(res.data.msg)
        }else {
          axios({
            url : 'http://localhost:8093/alipay/alipay/alipay/pay',
            method : 'get',
            params : {
              orderId : this.orderId,
              totalPrice : this.totalPrice,
              subject : this.roomName
            }
          }).then(res => {
            console.log(res)
          })
        }
      })
      })
    }
  },
  created(){
    this.form.cityId = this.$route.params.cityId; // 地区id
    this.form.hotelName =this.$route.params.hotelName; // 酒店名称
    this.rentalDateRange.push(this.$route.params.checkInTime);
    this.rentalDateRange.push(this.$route.params.checkOutTime);
    this.form.hotelAddress = this.$route.params.hotelAddress; // 酒店详细位置
    this.form.count = this.$route.params.roomCount; // 订房数量
    this.form.hotelRoomType = this.$route.params.roomId; // 房间id
    this.price = this.$route.params.price;  // 单价
    this.roomName = this.$route.params.roomName;  // 房间名


    this.getOrderId();
    this.calculateDays();
  }
}
</script>

<style scoped>
.form-container {
  max-width: 400px;
  margin: 0 auto;
}
</style>